<template>
  <div class="showMain">
    <div class="pic">
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546406062430&di=ca12f3218a20734f94adee251c104cba&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D1943017518%2C3140496353%26fm%3D214%26gp%3D0.jpg" alt="">
    </div>
    <div class="desc">
      When you want to succeed as bad as you wanna breathe,<br>
      then you’ll be successful.
    </div>
    <div class="intro">
      我叫张朋 <br>
      一名前端开发工程师 <br>
      642893779@qq.com <br>
    </div>
  </div>
</template>

<script>
export default {
  name: "home"
}
</script>

<style scoped lang="stylus">
  .showMain
    position: relative;
    background: url("https://20181106.oss-cn-beijing.aliyuncs.com/1.jpg") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .pic
      position absolute
      height 200px
      width 200px
      left 50%
      top 16%
      margin-left -100px
      border-radius 50%
      img
        border-radius 50%
        height 100%
        width 100%
    .desc
      position absolute
      top 55%
      left 0
      width 100%
      color #f9fffd
      font-size 1.5rem
      line-height 1.8rem
      letter-spacing 1px
      text-align center
      padding-bottom 2rem
      border-bottom 2px solid #fff
    .intro
      position absolute
      width 100%
      height 20%
      top 75%
      text-align center
      font-size 1.3rem
      line-height 2.5rem
      color #fff
</style>
